<template>
	<view class="home-item-container" :selectable="false" @click="this.$emit('open')">
		<view class="item-header-container">
			<view class="info">
				<view class="other u-flex u-row-between">
					<view class="date">{{submitDate}}</view>
				</view>
			</view>
		</view>
		<view class="item-content-container">
			{{submitContent}}
		</view>
		<template v-if="status== 1">
			<!-- 待处理 -->
			<view :style="{backgroundColor: bindStyle.status_received.backgroundColor}" class="right-status">待处理</view>
		</template>
		<template v-else-if="status==2">
			<!-- 已回复 -->
			<view :style="{backgroundColor: bindStyle.status_unReceived.backgroundColor}" class="right-status">已回复</view>
		</template>
		<template v-else-if="status==3">
			<!-- 已解决 -->
			<view :style="{backgroundColor: bindStyle.status_finshed.backgroundColor}" class="right-status">已解决</view>
		</template>
		<template v-else-if="status==4">
			<!-- 未解决 -->
			<view :style="{backgroundColor: bindStyle.status_unfinshed.backgroundColor}" class="right-status">未解决</view>
		</template>
		<template v-else-if="status==5">
			<!-- 未解决 -->
			<view :style="{backgroundColor: bindStyle.status_close.backgroundColor}" class="right-status">已关闭</view>
		</template>
	</view>
</template>

<script>
	/**
	 * 作者: 谢广顺
	 * 2020年11月23日 21:28:51
	 * 反馈item组件
	 */
	export default {
		props: {
			submitDate: {
				type: String,
				default: '一分钟前'
			},
			status: {
				/* 反馈状态*/
				type: [String,Number],
				require: true
			},
			submitContent: {
				type: String,
				require: true
			}
		},
		data() {
			return {
				/**
				 * 绑定的style样式
				 */
				bindStyle: {
					// 待处理
					status_received: {
						backgroundColor: '#2B85E4'
					},
					// 已回复
					status_unReceived: {
						backgroundColor: '#5555ff'
					},
					// 已解决
					status_finshed: {
						backgroundColor: '#81c200'
					},
					//未解决
					status_unfinshed:{
						backgroundColor: '#FF6600'
					},
					//已关闭
					status_close:{
						backgroundColor: '#FF0000'
					}
				}
			};
		},
		methods: {
			open() {
				console.log("return-item被点击");
			}
		}
	}
</script>

<style lang="scss">
	.home-item-container {
		width: 100%;
		position: relative;
		box-sizing: border-box;
		padding: 20rpx;
		background-color: #fff;
		border-radius: 10rpx;
		border: 1px solid #ebebeb;

		/* item头部 */
		.item-header-container {
			display: flex;

			.info {
				display: flex;
				flex-direction: column;
				width: 100%;
				margin-left: 20rpx;

				.other {
					color: #82848A;
					font-size: 12px;
				}
			}
		}

		/* item中部 - 任务card */
		.item-content-container {
			margin: 10rpx 20rpx;
			border-radius: 5px;
		}

		.right-status {
			position: absolute;
			width: 150rpx;
			color: #ECF5FF;
			right: 0;
			top: 0;
			text-align: center;
			padding: 5rpx;
			border-top-right-radius: 5px;
		}
	}
</style>
